<template>
	<view class="solid-bottom padding-tb evaluate-item">
		<view class="flex justify-between align-center">
			<view class="flex">
				<view class="fu-block-56 round overHidden">
					<fu-image :src="prop.head_img" mode="aspectFill"></fu-image>
				</view>
				<view class="margin-left-sm flex flex-direction justify-between">
					<view class="text-df text-333">{{ prop.user_nickname }}</view>
					<view>
						<block v-for="(item, index) in 5" :key="index">
							<image class="fu-block-18"
								:src="index + 1 <= prop.star ? 'https://localelife.chunchuangkeji.cn/h5img/images/star-2.png' : 'https://localelife.chunchuangkeji.cn/h5img/images/star.png'"
								mode="aspectFill"></image>
						</block>

					</view>
				</view>
			</view>

			<view class="text-sm text-999">{{ prop.create_time }}</view>
		</view>
		<view class="padding-top-sm padding-top-sm text-df text-333 word-break-all">{{ prop.content }}</view>
		<view class="padding-top-sm grid col-3" v-if="prop.video.length > 0 || prop.thumb.length > 0">
      <block v-for="(ele, index) in prop.video" :key="index">
        <view class="relative  " @tap.stop="previewVideo(ele)">
          <view class="square-box fu-block-216 radius-16 overHidden ">
            <fu-image :src="ele + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300'"
                mode="aspectFill"></fu-image>
            <view class="play-mask"></view>
            <view class="play-btn flex align-center justify-center radius-100 fu-block-64">
              <view class="play-arrow"></view>
            </view>
          </view>
        </view>

      </block>
      <view v-for="(ele, index) in prop.thumb" :key="index">
        <view class="fu-block-216 bg-f8 radius-16 overHidden img-item margin-right-16 margin-bottom-16"
          @tap.stop="preview(ele, index)">
          <image :src="ele" lazy-load mode="aspectFill" class="fu-block-216"></image>
        </view>
      </view>
		</view>
		<view class="text-999 text-df padding-top-sm text-cut-2" v-if="prop.key_name">
			{{prop.key_name}}
		</view>
		<view class="video-mask" v-if="videoShow">
			<view class="padding-left flex align-center"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="cuIcon-back text-white" style="font-size: 36rpx;" @click.stop="closeVideo"></view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<video :src="videoSrc" class="w100" id="myVideo" :show-fullscreen-btn="false"
				:style="{ height: 'calc(100% - ' + CustomBar + 'px)' }"></video>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<video :src="videoSrc" class="w100" id="myVideo" :show-fullscreen-btn="false" :show-mute-btn="true"
				:style="{ height: 'calc(100% - ' + CustomBar + 'px)' }"></video>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	/**
	 * @author
	 * @description 商品评价组件
	 * @param {Object} type - 没有用到这个属性，暂定
	 * @property {String} temp - 保存当前播放的是哪一个视频的id值+索引
	 */
	export default {
		props: {
			prop: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				videoContext: null,
				videoShow: false,
				videoSrc: ''
			};
		},
		mounted() {
			console.log(this.prop)
		},
		methods: {
			/**
			 * @event
			 * @description 查看大图
			 * @param {Object} item - 图片的信息
			 * @param {Number} index - 当前图片的索引
			 */
			preview(item, index) {
				uni.previewImage({
					current: index,
					urls: this.prop.thumb
				});
			},
			/**
			 * @event
			 * @description 查看视频
			 * @param {String} j - 视频路径
			 * @param {Number} index - 是第几个视频
			 * @param {String} el - 保存当前播放的是哪一个视频的id值+索引
			 */
			previewVideo(ele) {
				this.videoShow = true;
				// 获取 video 上下文 videoContext 对象
				if (this.videoContext) this.videoContext = null;
				this.videoContext = uni.createVideoContext('myVideo', this);
				this.videoSrc = ele;
				// 开始播放
				setTimeout(() => {
					this.videoContext.play();
				}, 200);
			},
			closeVideo() {
				this.videoContext.pause(); //暂停视频播放事件
				this.videoContext.seek(0);
				this.videoShow = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
  .evaluate-item {
    &:last-of-type::after {
      border-bottom: none;
    }
  }
	.square-box {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		.play-mask {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.3);
		}

		.play-btn {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);		
			border: 2rpx solid #ffffff;		
			z-index: 100;

			.play-arrow {
				width: 0;
				height: 0;
				border-top: 18rpx solid transparent;
				border-left: 30rpx solid #ffffff;
				border-bottom: 18rpx solid transparent;
				margin-left: 8rpx;
			}
		}

		image {
			position: relative;
			z-index: 98;
		}
	}

	.img-item:nth-child(3n) {
		margin-right: 0;
	}

	.video-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000000;
		z-index: 99999;
	}
</style>
